<template>
  <div id="all">
    <!-- 顶部信息 -->
    <el-col :span="24">
      <div id="top">
        <el-card class="box-card" style="background-color: #ebeef5">
          <span
            style="
              margin-left: 5%;
              margin-top: 5px;
              background-color: #3a8ee6;
              font-size: 16px;
            "
            >&nbsp;&nbsp;</span
          >
          <span style="font-size: 15px; margin-left: 10px">动态列表</span>
        </el-card>
      </div>
    </el-col>

    <!-- 搜索栏 -->
    <el-col :span="24">
      <div id="sousuo">
        <div id="text1">动态查询：</div>
        <div id="input1">
          <el-input placeholder="请输入内容" v-model="input" clearable>
          </el-input>
        </div>
        <el-button
          id="text2"
          type="danger"
          round
          size="small"
          icon="el-icon-search"
          @click="sousuolike"
          >搜 索</el-button
        >
      </div>
    </el-col>

    <el-col :span="24">
      <div id="main">
        <!-- 导航栏 -->
        <el-menu class="el-menu-demo" mode="horizontal">
          <el-menu-item index="1" @click="showForm1">全部动态</el-menu-item>
          <!-- <el-menu-item index="2" @click="showForm2">我的动态</el-menu-item>
          <el-menu-item index="3" @click="showForm3">最新动态</el-menu-item>
          <el-menu-item index="4" @click="showForm4">最热动态</el-menu-item> -->
          <el-button id="addrecent" round @click="addRecent" type="danger"
            >发布动态</el-button
          >
        </el-menu>

        <!-- 跳转不同页面获取数据 -->
        <div id="showall">
          <!-- 全部分页面---------------------------------------------------------------------------------------------------- -->
          <div v-show="show1">
            <el-table :data="tableData" height="605" border style="width: 100%">
              <el-table-column
                prop="ownerName"
                label="姓名"
                width="120"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="content"
                label="动态内容"
                width="260"
                align="center"
              ></el-table-column>
              <el-table-column label="动态图片" width="200" align="center">
                <template slot-scope="td">
                  <img :src="td.row.image" style="width: 80px; height: 80px" />
                </template>
              </el-table-column>
              <el-table-column
                prop="agreeNum"
                label="点赞数"
                width="80"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="time"
                label="时间"
                align="center"
                width="200"
              ></el-table-column>
              <!-- 操作 -->
              <el-table-column label="操作" align="center">
                <template slot-scope="td">
                  <el-button
                    type="primary"
                    plain
                    size="mini"
                    @click="show(td.row)"
                    >查看</el-button
                  >
                  <el-button
                    type="warning"
                    plain
                    size="mini"
                    @click="update(td.row)"
                    v-if="td.row.isUpdate == true"
                    >修改</el-button
                  >
                  <el-button
                    type="danger"
                    plain
                    size="mini"
                    @click="del(td.row)"
                    v-if="td.row.isUpdate == true"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <!-- 查看弹框 -->
            <el-dialog title="动态详情" :visible.sync="showdialog" width="60%">
              <detailAll
                :recent="currentRecent"
                :commentAndReply="commentAndReply"
                :userAndActivity="userAndActivity"
                v-if="refresh"
                @closedialog="closeshowVisible"
              ></detailAll>
              <span slot="footer" class="dialog-footer">
                <!-- <el-button type="primary" @click="closedialog = false">确 定</el-button> -->
              </span>
            </el-dialog>

            <!-- 修改弹框 -->
            <el-dialog
              title="修改动态"
              :visible.sync="updateVisible"
              width="50%"
            >
              <updateAll
                :recent="currentRecent"
                v-if="refresh"
                @closedialog="updateData"
              ></updateAll>
            </el-dialog>

            <!-- 新增动态弹框 -->
            <el-dialog title="新增动态" :visible.sync="addVisible" width="50%">
              <addRecent
                :recent="currentRecent"
                v-if="refresh"
                @closeadd="addData"
              ></addRecent>
            </el-dialog>
          </div>

          <!-- 我的动态分页面---------------------------------------------------------------------------------------------------- -->
          <!-- <div v-show="show2">
          <el-table :data="tableData" height="480" border style="width: 100%">
            <el-table-column prop="date" label="序号" width="180" align="center"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180" align="center"></el-table-column>
            <el-table-column prop="address" label="地址" align="center"></el-table-column>
          </el-table>
        </div> -->

          <!-- 最新动态分页面---------------------------------------------------------------------------------------------------- -->
          <!-- <div v-show="show3">
          <el-table :data="tableData" height="480" border style="width: 100%">
            <el-table-column prop="date" label="日期" width="180" align="center"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180" align="center"></el-table-column>
            <el-table-column prop="address" label="地址" align="center"></el-table-column>
          </el-table>
        </div> -->

          <!-- 最热动态分页面---------------------------------------------------------------------------------------------------- -->
          <!-- <div v-show="show4">
          <el-table :data="tableData" height="480" border style="width: 100%">
            <el-table-column prop="date" label="日期" width="180" align="center"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180" align="center"></el-table-column>
            <el-table-column prop="address" label="地址" align="center"></el-table-column>
          </el-table>
        </div> -->

          <!-- 分页信息 -->
          <div class="block">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 30, 50]"
              :page-size="size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </el-col>
  </div>
</template>

<script>
import detailAll from "./detailAll";
import updateAll from "./updateAll";
import http from "../../../axios_config";
import addRecent from "./addRecent";

export default {
  components: {
    detailAll,
    updateAll,
    addRecent,
  },
  //当前组件创建完毕
  mounted() {
    //调用方法获取第一页数据
    this.findByPage();
  },
  data() {
    return {
      //分页信息
      currentPage: 1, //当前页
      total: 0, //总条数
      totalPage: 0, //总页数
      currentSize: 5, //每一页大小
      size: 5,
      //展示表格内容
      tableData: [], //表格数据

      show1: true,
      // show2: false,
      // show3: false,
      // show4: false,

      //
      input: "",

      //
      showdialog: false, //查看弹框
      updateVisible: false, //修改弹框
      addVisible: false, //新增弹框
      currentRecent: {},
      refresh: true, //强制刷新子组件
      //评论及回复
      commentAndReply: [],
      //活动和发起这数据
      userAndActivity: {},
    };
  },

  methods: {
    //页面跳转，获取数据展示
    showForm1() {
      // this.show1 = !this.show1;
      this.currentPage = 1;
      this.findByPage();
      // this.show2 = false;
      // this.show3 = false;
      // this.show4 = false;
    },
    // showForm2() {
    //   this.show2 = !this.show2;
    //   this.show1 = false;
    //   this.show3 = false;
    //   this.show4 = false;
    // },
    // showForm3() {
    //   this.show3 = !this.show3;
    //   this.show1 = false;
    //   this.show2 = false;
    //   this.show4 = false;
    // },
    // showForm4() {
    //   this.show4 = !this.show4;
    //   this.show1 = false;
    //   this.show2 = false;
    //   this.show3 = false;
    // },

    //查看,包含评论功能-------
    show(row) {
      //强制刷新
      this.refresh = false;
      this.$nextTick(() => {
        this.refresh = true;
      });

      this.currentRecent = row;
      this.showdialog = true;
    },

    //关闭订单框方法
    closeshowVisible() {
      //关闭对话框
      this.showdialog = false;
    },

    //修改弹框-------
    update(row) {
      this.updateVisible = true;
      this.currentRecent = row;
    },
    //修改数据，前后端交互
    updateData(data) {
      this.updateVisible = false;
      //修改的数据
      if (data.result) {
        let recent = {};
        for (let i = 0; i < this.tableData.length; i++) {
          let temp = this.tableData[i];
          if (temp.recentId == data.data.recentId) {
            recent.id = data.data.recentId;
            recent.content = data.data.content;
            recent.image = data.data.image;
            break;
          }
        }
        http
          .post("http://192.168.11.18:8080/recent/updaterecent", recent)
          .then((res) => {
            if (res.status == 200) {
              this.$message({
                showClose: true,
                message: "修改成功",
                type: "success",
              });
            } else {
              this.$message({
                showClose: true,
                message: "修改失败，请稍后再试",
                type: "warning",
              });
            }
            //自动刷新页面
            this.findByPage();
          });
      }
    },

    //新增动态
    addRecent(row) {
      this.addVisible = true;
      this.currentRecent = row;
    },
    //新增数据，前后端交互
    addData(data) {
      this.addVisible = false;

      let parms = new URLSearchParams();
      parms.append("content", data.data.content);
      parms.append("image", data.data.image);

      if (data.data.content != "" && data.data.content != null) {
        this.$message({
          showClose: true,
          message: "新增成功",
          type: "success",
        });
        http.post("http://192.168.11.18:8080/recent/saverecent", parms)
          .then((res) => {
            console.log(222);
            //自动刷新页面
            this.findByPage();
          });
      } else {
        //强制刷新
        this.refresh = false;
        this.$nextTick(() => {
          this.refresh = true;
        });
        this.$message({
          showClose: true,
          message: "新增失败，请稍后再试",
          type: "warning",
        });
      }
    },

    //分页 ------
    handleSizeChange(currentSize) {
      this.currentSize = currentSize;
      this.findByPage();
    },

    handleCurrentChange(page) {
      this.currentPage = page;
      //发送请求获取当前页的数据page,size
      this.findByPage();
    },

    findByPage() {
      http
        .get(
          "http://192.168.11.18:8080/recent/selectRecent?page=" +
            this.currentPage +
            "&size=" +
            this.currentSize
        )
        .then((res) => {
          this.tableData = res.data.data;
          //分页数据
          this.total = res.data.total;
          this.currentPage = res.data.currentPage;
          this.totalPage = res.data.totalPage;
          this.size = res.data.size;
        });
    },

    //删除
    del(row) {
      this.$confirm("删除后无法恢复，确定删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          http
            .get(
              "http://192.168.11.18:8080/recent/deleterecent?id=" + row.recentId
            )
            .then((res) => {
              if ((res.state = "SUCCESS")) {
                this.findByPage();
              }
            });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      this.currentRecent = row;
    },

    //搜索（模糊查询）
    sousuolike() {
      http
        .get(
          "http://192.168.11.18:8080/recent/findRecentByLike?content=" +
            this.input +
            "&current=" +
            this.currentPage +
            "&size=" +
            this.currentSize
        )
        .then((res) => {
          if (this.input != null) {
            this.tableData = res.data.data.data;
            //分页数据
            this.total = res.data.data.total;
            this.currentPage = res.data.data.currentPage;
            this.totalPage = res.data.data.totalPage;
            this.size = res.data.data.size;
          } else {
            this.findByPage();
          }
        });
    },
  },
};
</script>

<style scoped>
div {
  /* border: 1px red solid; */
}
body {
  background-color: rgb(248, 245, 245);
  border: 1px red solid;
}
.box-card {
  width: 100%;
}
#all {
  width: 90%;
  margin: auto;
  margin-top: 10px;
}
#sousuo {
  background-color: white;
  margin-top: 10px;
  height: 60px;
  box-shadow: 0 0 5px rgb(176, 209, 241);
  border-radius: 5px;
}
#input1 {
  width: 500px;
  height: 50px;
  margin-top: 10px;
  float: left;
}
#text1 {
  float: left;
  margin-left: 410px;
  margin-top: 17px;
  font-size: 18px;
}
#text2 {
  margin-left: 10px;
  margin-top: 10px;
  font-size: 16px;
}
#main {
  width: 100%;
  height: 666px;
  float: left;
  background-color: white;
  margin-top: 10px;
  box-shadow: 0 0 5px rgb(176, 209, 241);
  border-radius: 5px;
}
#addrecent {
  margin-top: 10px;
  /* margin-left: 725px; */
}
.block {
  text-align: center;
  margin-top: 20px;
}
el-table th {
  text-align: center;
}
.box-card1 {
  height: 150px;
  width: 220px;
}
.el-dialog {
  width: 500px;
}
#topnum {
  line-height: 70px;
  font-size: 35px;
  color: white;
  padding-left: 60px;
}
</style>